<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-07-09 15:53:08
 * @LastEditTime: 2023-06-29 16:58:00
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 标准增删改查 列表页 - 组件
 * @FilePath: \vue3-element-plus-web\src\components\StandardPage\index.vue
 * Copyright 版权声明
-->
<template>
  <div class="standardPage-container">
    <!-- 顶部区域 -->
    <!-- <slot name="header" v-if="selfOptions.showHeader === true">
      <div class="standardPage-container-header">
        <h2 class="pageTitle">
          {{selfOptions.title}}
        </h2>
      </div>
    </slot> -->

    <!-- 查询条件区域 -->
    <slot name="search" v-if="selfOptions.showSearch === true">
      <!-- 搜索区域 -- START -->
      <div class="filter-container" :class="{ open: moreQueryConditionOpen }">
        <el-form :inline="true" :label-width="selfOptions.searchLabelWidth" ref="searchFromRef" :model="listQuery">
          <el-row :gutter="20">
            <!-- 搜索区域 - 条件区域 -- START -->

            <template v-for="(item, index) in column" :key="index">
              <template v-if="item.search === true">
                <el-col :span="12" :xl="6" :lg="8" :class="{ hidden: item.searchInMore === true }">
                  <el-form-item :label="`${item.label}：`">
                    <!-- select 下拉单选 、 selectMultiple 下拉多选 -->
                    <template v-if="item.searchType === 'select' || item.searchType === 'selectMultiple'">
                      <el-select
                        v-model="listQuery[item.prop]"
                        :placeholder="item.searchPlaceholder || `请选择${item.label}`"
                        clearable
                        :multiple="item.searchType === 'selectMultiple' ? true : false"
                      >
                        <el-option v-for="i in item.dictData" :key="`${i.label}_${i.value}`" :label="i.label" :value="i.value"> </el-option>
                      </el-select>
                    </template>

                    <!-- cascader 级联选择器 ： 任意节点单选 -->
                    <template v-else-if="item.searchType === 'cascader'">
                      <el-cascader
                        v-model="listQuery[item.prop]"
                        :placeholder="`请选择${item.label}`"
                        :options="item.dictData"
                        :props="{
                          checkStrictly: true,
                          expandTrigger: 'hover',
                          value: item.dictProps && item.dictProps.value ? item.dictProps.value : 'value',
                          label: item.dictProps && item.dictProps.label ? item.dictProps.label : 'label',
                        }"
                        clearable
                      />
                    </template>

                    <!-- 日期区间组件 -->
                    <template v-else-if="item.searchType === 'daterange'">
                      <el-date-picker
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        v-model="listQuery[item.prop]"
                        type="daterange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                      />
                    </template>

                    <!-- 时间区间组件 -->
                    <template v-else-if="item.searchType === 'datetimerange'">
                      <el-date-picker
                        format="YYYY-MM-DD hh:mm:ss"
                        value-format="YYYY-MM-DD hh:mm:ss"
                        v-model="listQuery[item.prop]"
                        type="datetimerange"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                      />
                    </template>

                    <!-- 日期组件 -->
                    <template v-else-if="item.searchType === 'date'">
                      <el-date-picker
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD"
                        v-model="listQuery[item.prop]"
                        type="date"
                        :placeholder="item.searchPlaceholder || `${item.label}`"
                      />
                    </template>

                    <!-- 时间组件 -->
                    <template v-else-if="item.searchType === 'datetime'">
                      <el-date-picker
                        format="YYYY-MM-DD hh:mm:ss"
                        value-format="YYYY-MM-DD hh:mm:ss"
                        v-model="listQuery[item.prop]"
                        type="datetime"
                        :placeholder="item.searchPlaceholder || `${item.label}`"
                      />
                    </template>

                    <!-- 单行文本框 -->
                    <template v-else>
                      <el-input :placeholder="item.searchPlaceholder || `请输入${item.label}`" v-model="listQuery[item.prop]" clearable> </el-input>
                    </template>
                  </el-form-item>
                </el-col>
              </template>
            </template>

            <!-- 搜索区域 - 条件区域 -- END -->
            <!-- 搜索区域 - 功能区域 -- START -->
            <el-col :span="12" :xl="6" :lg="8">
              <el-form-item class="handle-button-container">
                <el-button type="primary" @click="handleFilter" :loading="btnLoading">
                  <el-icon><search /></el-icon>
                  {{ selfOptions.searchBtnText }}
                </el-button>
                <el-button @click="handleResetFields">
                  <el-icon><RefreshRight /></el-icon>
                  {{ selfOptions.emptyBtnText }}
                </el-button>
                <template v-if="selfOptions.searchShowMoreBtn === true">
                  <el-button link type="primary" @click="handleToggleMore()">
                    <template v-if="!moreQueryConditionOpen">
                      <el-icon><ArrowDown /></el-icon>
                      展开
                    </template>
                    <template v-else>
                      <el-icon><ArrowUp /></el-icon>
                      收起
                    </template>
                  </el-button>
                </template>
              </el-form-item>
            </el-col>
            <!-- 搜索区域 - 功能区域 -- END -->
          </el-row>
        </el-form>
      </div>
      <!-- 搜索区域 -- END -->
    </slot>

    <!-- 查询结果展示区域 -->
    <slot name="result">
      <!-- 结果展示区 -- START -->
      <div class="result-list-container">
        <!-- 功能按钮区 -- START -->
        <div class="handle-container">
          <h3 class="handle-container_title">
            {{ selfOptions.resultTitle }}
          </h3>
          <div class="handle-container_btn">
            <el-button
              v-if="(typeof selfOptions.showCreateBtn === 'function' ? selfOptions.showCreateBtn() : selfOptions.showCreateBtn) === true"
              @click="handleCreate()"
              :loading="btnLoading"
              type="primary"
              v-handle-auth:CREATE="{ meta: this.$route.meta }"
            >
              <el-icon><plus /></el-icon>
              {{ selfOptions.createBtnText }}
            </el-button>

            <!-- 自定义操作按钮 -->
            <slot name="handleBtns">
              <!-- <el-popconfirm
                title="确定要删除吗？"
                @confirm="handleBatchDelete()"
              >
                <template #reference>
                  <el-button
                    :loading="btnLoading"
                    type="danger"
                    plain
                  >
                    <el-icon><Delete /></el-icon>
                    批量删除
                  </el-button>
                </template>
              </el-popconfirm> -->
            </slot>

            <!-- 刷新 -->
            <el-tooltip effect="dark" content="刷新" placement="top">
              <el-button @click="handleRefresh()" circle>
                <el-icon><RefreshRight /></el-icon>
              </el-button>
            </el-tooltip>
            <!-- 导出 -->
            <el-tooltip
              effect="dark"
              content="导出"
              placement="top"
              v-if="(typeof selfOptions.showExportBtn === 'function' ? selfOptions.showExportBtn() : selfOptions.showExportBtn) === true"
            >
              <el-button @click="handleExport()" circle>
                <el-icon><Download /></el-icon>
              </el-button>
            </el-tooltip>
            <!-- 列设置 -->
            <el-tooltip effect="dark" content="列设置" placement="top">
              <el-button @click="handleColumnSettings()" circle style="display: none">
                <el-icon><Setting /></el-icon>
              </el-button>
            </el-tooltip>
          </div>
        </div>
        <!-- 功能按钮区 -- END -->

        <!-- 列表多选选中条数显示区 START -->
        <template v-if="selfOptions.selection === true && listMultipleSelection.length > 0">
          <div class="table-list_selectionInfo clearfix">
            <span class="count"> 已选择 {{ listMultipleSelection.length }} 项 </span>
            <el-link style="float: right" type="primary" :underline="false" title="取消选择" @click="handleClearSelection()"> 取消选择 </el-link>
          </div>
        </template>
        <!-- 列表多选选中条数显示区 END -->

        <!-- 列表展示区 -- START -->
        <div class="table-list">
          <el-table
            ref="multipleTableRef"
            :data="listData"
            v-loading="listLoading"
            :border="tableAttr.border"
            :fit="tableAttr.fit"
            :show-header="tableAttr.showHeader"
            :highlight-current-row="tableAttr.highlightCurrentRow"
            :row-key="tableAttr.rowKey"
            :default-expand-all="tableAttr.defaultExpandAll"
            :lazy="tableAttr.lazy"
            :load="tableAttr.load"
            :tree-props="tableAttr.treeProps"
            :row-class-name="tableAttr.rowClassName"
            style="width: 100%"
            @selection-change="handleSelectionChange"
            @expand-change="handleExpandChange"
          >
            <el-table-column type="selection" width="55" align="center" v-if="selfOptions.selection === true" />
            <el-table-column align="center" :label="selfOptions.indexLabel" width="60" v-if="selfOptions.index === true">
              <template v-slot="scope">
                <span>{{ scope.$index + 1 }}</span>
              </template>
            </el-table-column>

            <template v-for="(item, index) in column" :key="index">
              <template v-if="item.show !== false">
                <el-table-column
                  :label="item.label"
                  :prop="item.prop"
                  :width="item.width"
                  :min-width="item.minWidth || 120"
                  :align="item.align || 'left'"
                  :show-overflow-tooltip="typeof item.showOverflowTooltip !== 'undefined' ? item.showOverflowTooltip : true"
                >
                  <template v-slot="scope">
                    <slot :name="`column_${item.prop}`" :row="scope.row" :index="scope.$index" :column="scope.column">
                      <!-- 如果当前列配置了字典， 则从字典中匹配显示值 -->
                      <template v-if="item.dictData">
                        <template v-for="(distItem, distIndex) in item.dictData" :key="distIndex">
                          <template v-if="scope.row[item.prop] === distItem.value">
                            <span>{{ distItem.label }}</span>
                          </template>
                        </template>
                      </template>
                      <template v-else>
                        <span>{{ scope.row[item.prop] }}</span>
                      </template>
                    </slot>
                  </template>
                </el-table-column>
              </template>
            </template>

            <el-table-column
              v-if="selfOptions.showHandleColumn === true"
              fixed="right"
              align="center"
              label="操作"
              :width="selfOptions.handleColumnWidth"
              class-name="small-padding fixed-width handle-td"
            >
              <template v-slot="scope">
                <el-link
                  v-if="(typeof selfOptions.showDetailBtn === 'function' ? selfOptions.showDetailBtn(scope.row) : selfOptions.showDetailBtn) === true"
                  type="primary"
                  :title="selfOptions.detailBtnText"
                  @click="handleDetail(scope.row)"
                  v-handle-auth:DETAIL="{ meta: this.$route.meta }"
                >
                  {{ selfOptions.detailBtnText }}
                </el-link>
                <el-link
                  v-if="(typeof selfOptions.showUpdateBtn === 'function' ? selfOptions.showUpdateBtn(scope.row) : selfOptions.showUpdateBtn) === true"
                  type="success"
                  :title="selfOptions.updateBtnText"
                  @click="handleUpdate(scope.row)"
                  v-handle-auth:UPDATE="{ meta: this.$route.meta }"
                >
                  {{ selfOptions.updateBtnText }}
                </el-link>
                <el-popconfirm
                  v-if="(typeof selfOptions.showDeleteBtn === 'function' ? selfOptions.showDeleteBtn(scope.row) : selfOptions.showDeleteBtn) === true"
                  title="确定要删除吗？"
                  @confirm="handleDelete(scope.row)"
                >
                  <template #reference>
                    <el-link type="danger" :title="selfOptions.deleteBtnText" v-handle-auth:DELETE="{ meta: this.$route.meta }">
                      {{ selfOptions.deleteBtnText }}
                    </el-link>
                  </template>
                </el-popconfirm>
                <!-- 表格操作列 - 自定义操作按钮 -->
                <slot name="handleColumnBtns" :row="scope.row" :index="scope.$index" :column="scope.column"> </slot>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 列表展示区 -- END -->

        <!-- 分页 -- START -->
        <template v-if="selfOptions.showPage === true">
          <pagination
            :total="listPage.total"
            v-model:current-page="listPage.pageNum"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </pagination>
        </template>
        <!-- 分页 -- END -->
      </div>
      <!-- 结果展示区 -- END -->
    </slot>

    <!-- 列设置 -- START -->
    <column-settings></column-settings>
    <!-- 列设置 -- END -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// 图标组件
import {
  Search,
  Plus,
  Setting,
  RefreshRight,
  ArrowDown,
  ArrowUp,
  Download,
  /**, Delete */
} from '@element-plus/icons-vue'
// 分页组件
import Pagination from '@/components/Pagination/index.vue'
// 列设置组件
import ColumnSettings from '@/components/ColumnSettings/index.vue'

// 组件默认属性值
const DEFAULT_OPTIONS = {
  MODULE_VALUE: '', // 当前模块名称
  createDrawerWidth: '30%', // 新建 抽屉弹窗宽度
  updateDrawerWidth: '30%', // 编辑 抽屉弹窗宽度
  detailDrawerWidth: '30%', // 详情 抽屉弹窗宽度
  // 自动加载数据
  autoOnLoadData: true,
  // 在哪个生命周期内自动加载数据 : created / activated
  autoOnLoadDataHook: 'activated',
  // 页面title, showHeader 为 true 时生效
  title: '页面标题',
  // 结果展示区标题
  resultTitle: '列表',
  // 是否展示 header
  showHeader: true,
  // 是否展示 查询条件区域
  showSearch: true,
  // 搜索条件标题的宽度
  searchLabelWidth: '110px',
  // 搜索的文字
  searchBtnText: '查询',
  // 清空的文字
  emptyBtnText: '重置',
  // 点击【重置】按钮后后是否自动重载列表
  emptyBtnAutoReload: true,
  // 是否展示 查询条件区域 - 【展开/折叠】 按钮
  searchShowMoreBtn: true,
  // 功能按钮区 - 导出 按钮是否展示
  showExportBtn: false,
  // 是否展示 分页
  showPage: true,
  // 是否显示表格 行多选， 默认值： false ， 勾选的同时会回调 selectionChange 方法返回当前选中的数据
  selection: false,
  // 是否显示表格 索引/序号 列， 默认值： false
  index: false,
  // 设置表格的序号的标题,默认为： 序号
  indexLabel: '序号',
  // 表格操作列 - 是否展示操作列
  showHandleColumn: true,
  // 表格操作列 - 宽度
  handleColumnWidth: '150',
  // 表格操作列 - 新建按钮是否展示
  showCreateBtn: true,
  /**
   * 表格操作列 - 新建按钮展示 文字
   * @type String
   */
  createBtnText: '新建',
  /**
   * 表格操作列 - 详情按钮是否展示
   * @type boolean   true | false
   * @type function (row = 当前行的数据)  return true | return false
   */
  showDetailBtn: true,
  /**
   * 表格操作列 - 详情按钮展示 文字
   * @type String
   */
  detailBtnText: '查看',
  /**
   * 表格操作列 - 编辑按钮是否展示
   * @type boolean   true | false
   * @type function (row = 当前行的数据)  return true | return false
   */
  showUpdateBtn: true,
  /**
   * 表格操作列 - 编辑按钮展示 文字
   * @type String
   */
  updateBtnText: '编辑',
  /**
   * 表格操作列 - 删除按钮是否展示
   * @type boolean   true | false
   * @type function (row = 当前行的数据)  return true | return false
   */
  showDeleteBtn: true,
  /**
   * 表格操作列 - 删除按钮展示 文字
   * @type String
   */
  deleteBtnText: '删除',
  // table 属性
  tableAttr: {
    border: true, // 是否带有纵向边框
    fit: true, // 列的宽度是否自撑开
    showHeader: true, // 是否显示表头
    highlightCurrentRow: false, // 是否要高亮当前行
    rowKey: '', // 行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
    defaultExpandAll: false, // 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
    lazy: false, // 是否懒加载子节点数据
    load: () => {}, // 加载子节点数据的函数，lazy 为 true 时生效，函数第二个参数包含了节点的层级信息
    // 渲染嵌套数据的配置选项
    treeProps: {
      children: 'children',
      hasChildren: 'hasChildren',
    },
    // 行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。 function({ row, rowIndex }) / string
    rowClassName: () => {},
  },
  // 字段配置
  column: [],
}

export default {
  name: 'StandardPage',
  computed: {
    ...mapGetters(['drawerReloadPage', 'permissionRouters']),
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
  },
  components: {
    Pagination,
    Search,
    Plus,
    Setting,
    RefreshRight,
    ArrowDown,
    ArrowUp,
    Download,
    // Delete,
    ColumnSettings,
  },
  props: {
    // 父页面传过来的一些业务参数， 供弹窗、遮罩等操作使用
    pageParams: {
      type: Object,
      default: () => {
        return {}
      },
    },
    // 分页信息
    page: {
      type: Object,
      default: () => {
        return {
          pageNum: 1,
          total: 0,
          pageSize: 10,
        }
      },
    },
    // 表格列表数据
    listData: {
      type: Array,
      default: () => {
        return []
      },
    },
    // 组件配置项
    options: {
      type: Object,
      default: () => {
        return DEFAULT_OPTIONS
      },
    },
    // 按钮 loading 状态
    btnLoading: {
      type: Boolean,
      default: () => {
        return false
      },
    },
    // 表格列表 loading 状态
    listLoading: {
      type: Boolean,
      default: () => {
        return false
      },
    },
  },
  data() {
    return {
      tableAttr: {}, // 表属性
      column: [], // 列设置
      selfOptions: {}, // 当前组件配置信息， 由父组件传过来
      moreQueryConditionOpen: false, // 查询区域 - 是否展开更多查询条件
      listMultipleSelection: [], // 多选
      listQuery: {},
      listPage: {
        pageNum: 1,
        total: 0,
        pageSize: 10,
      },
      // 父组件名称
      parentCompName: '',
    }
  },
  watch: {
    page: {
      handler: function (val, oldVal) {
        this.listPage = val
      },
      deep: true,
    },
    // 查询条件体
    listQuery: {
      handler: function (val, oldVal) {},
      deep: true,
    },
    // 监听 是否重载页面标识 ， true：重载 false：不重载
    drawerReloadPage: {
      handler: function (val, oldVal) {
        let reloadStatus = false
        let reloadParams = {}
        if (typeof val === 'boolean') {
          reloadStatus = val
        }
        if (typeof val === 'object') {
          reloadStatus = val.reload
          reloadParams = val.reloadParams || {}
        }
        if (reloadStatus === true) {
          this.getList(reloadParams)
        }
      },
      deep: true,
    },
  },
  created() {
    // 获取父组件，如果父组件名称为空获取祖先组件
    const parentComp = this.$parent || this.$root
    // 获取父组件 或 祖先组件的名称
    this.parentCompName = parentComp.$options.name || ''
    // console.log('-----permissionRouters:', this.permissionRouters)
    // console.log(`🚀 ~ file: index.vue:654 ~ created ~ this.parentCompName:`, this.parentCompName)
    // console.log(this.cachedViews)
    // 判断父组件是否被 tagView 缓存
    if (this.cachedViews.indexOf(this.parentCompName) > -1) {
      DEFAULT_OPTIONS.autoOnLoadDataHook = 'activated'
    } else {
      DEFAULT_OPTIONS.autoOnLoadDataHook = 'created'
    }
    // 将调用参数与默认参数合并
    this.selfOptions = Object.assign({}, DEFAULT_OPTIONS, this.options)

    // 表属性
    this.tableAttr = Object.assign({}, DEFAULT_OPTIONS.tableAttr, this.options.tableAttr)

    // 列设置
    this.column = this.selfOptions.column

    // 组装搜索条件数据
    for (const item of this.column) {
      if (item.search === true) {
        if (
          item.searchType === 'selectMultiple' ||
          item.searchType === 'checkbox' ||
          item.searchType === 'daterange' ||
          item.searchType === 'datetimerange' ||
          item.searchType === 'cascader'
        ) {
          this.listQuery[item.prop] = []
        } else {
          this.listQuery[item.prop] = ''
        }
        // 搜索项默认值
        if (typeof item.searchDefaultValue !== 'undefined') {
          this.listQuery[item.prop] = item.searchDefaultValue
        }
      }
    }
    this.listQueryBAK = JSON.parse(JSON.stringify(this.listQuery))

    // 在 created 内自动加载数据
    if (this.selfOptions.autoOnLoadData === true && this.selfOptions.autoOnLoadDataHook === 'created') {
      console.log(`----loadData ${this.parentCompName} in created`)
      // 获取列表
      this.getList()
    }
  },
  activated() {
    // 在 activated 内自动加载数据
    if (this.selfOptions.autoOnLoadData === true && this.selfOptions.autoOnLoadDataHook === 'activated') {
      console.log(`----loadData ${this.parentCompName} in activated`)
      // 获取列表
      this.getList()
    }
  },
  deactivated() {},
  methods: {
    // 获取表格 ref
    getTableRef() {
      return this.$refs.multipleTableRef
    },
    // 设置搜索条件
    setListQuery(
      params = {
        query: {},
        page: {},
      }
    ) {
      const query = params.query || {}
      const page = params.page || {}
      this.listQuery = Object.assign({}, this.listQuery, query)
      this.listPage = Object.assign({}, this.listPage, page)
      this.getList()
    },
    // 获取搜索条件
    getListQuery() {
      return {
        query: this.listQuery,
        page: this.listPage,
      }
    },
    // 取消选择
    handleClearSelection() {
      this.$refs.multipleTableRef.clearSelection()
    },
    // 查询区域 - 展开 / 折叠
    handleToggleMore() {
      this.moreQueryConditionOpen = !this.moreQueryConditionOpen
    },
    // 列设置
    handleColumnSettings() {
      this.$store
        .dispatch('ShowColumnSettingsDrawer', {
          module: this.selfOptions.MODULE_VALUE,
          params: {},
        })
        .then((res) => {})
    },
    // 当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）
    handleExpandChange(row, expanded) {
      this.$emit('expand-change', row, expanded)
    },
    // 多选结果赋值
    handleSelectionChange(val) {
      this.listMultipleSelection = val
      this.$emit('selection-change', val)
    },
    // 改变每页显示条数
    handleSizeChange(val) {
      this.listPage.pageSize = val
      this.getList()
    },
    // 改变当前页面
    handleCurrentChange(val) {
      this.listPage.pageNum = val
      this.getList()
    },
    // 重置表单
    handleResetFields() {
      this.listQuery = JSON.parse(JSON.stringify(this.listQueryBAK))
      // 点击【重置】按钮后后是否自动重载列表
      if (this.selfOptions.emptyBtnAutoReload === true) {
        this.getList()
      }
      // this.$refs['searchFromRef'].resetFields()
      this.$emit('search-reset', {
        query: this.listQuery,
        page: this.listPage,
      })
    },
    // 查询
    handleFilter() {
      this.listPage.pageNum = 1
      this.getList()
      this.$emit('search-change', {
        query: this.listQuery,
        page: this.listPage,
      })
    },
    // 刷新数据
    handleRefresh() {
      this.handleFilter()
      this.$emit('refresh-change', {
        query: this.listQuery,
        page: this.listPage,
      })
    },
    // 导出数据
    handleExport() {
      if (this.$attrs['onExportData']) {
        this.$emit('export-data', {
          query: this.listQuery,
          page: this.listPage,
        })
      }
    },
    // 获取列表
    getList(reloadParams) {
      this.$emit('on-load-data', {
        query: this.listQuery,
        page: this.listPage,
        reloadParams,
      })
    },
    // 查看
    handleDetail(row) {
      this.$store
        .dispatch('ShowDrawer', {
          module: this.selfOptions.MODULE_VALUE,
          type: 'DETAIL',
          size: this.selfOptions.detailDrawerWidth,
          params: {
            row,
            pageParams: this.pageParams,
          },
        })
        .then((res) => {})
    },
    // 添加
    handleCreate(row) {
      this.$store
        .dispatch('ShowDrawer', {
          module: this.selfOptions.MODULE_VALUE,
          type: 'CREATE',
          size: this.selfOptions.createDrawerWidth,
          params: {
            pageParams: this.pageParams,
          },
        })
        .then((res) => {})
    },
    // 编辑
    handleUpdate(row) {
      this.$store
        .dispatch('ShowDrawer', {
          module: this.selfOptions.MODULE_VALUE,
          type: 'UPDATE',
          size: this.selfOptions.updateDrawerWidth,
          params: {
            row,
            pageParams: this.pageParams,
          },
        })
        .then((res) => {})
    },
    // 删除
    handleDelete(row) {
      this.$emit('row-del', {
        query: this.listQuery,
        page: this.listPage,
        data: {
          ...row,
        },
      })
    },
    // 批量删除
    handleBatchDelete() {
      const idsArr = []
      for (const item of this.listMultipleSelection) {
        idsArr.push(item.id)
      }
      if (idsArr.length === 0) {
        this.$notify({
          title: '提示',
          message: '请选择数据',
          type: 'warning',
          duration: 2000,
        })
      } else {
        const ids = idsArr.toString()
        this.handleDelete({
          id: ids,
        })
      }
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.standardPage-container {
  .filter-container {
    :deep(.el-date-editor.el-input),
    :deep(.el-date-editor.el-input__wrapper) {
      width: 100%;
    }
  }
  &-header {
    background-color: #fff;
    .pageTitle {
      font-size: 18px;
      color: #333;
      margin: 0;
      padding: 10px 20px;
      margin-bottom: 10px;
    }
  }
  .table-list_selectionInfo {
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #e6f7ff;
    border: 1px solid #bae7ff;
    margin-bottom: 15px;
    padding: 0 15px;
    font-size: 14px;
  }
}
</style>
